<template>
  <div>
    <a-button @click="openJianshu">打开一个子窗口</a-button>
    <a-button @click="setTitle">主进程发送消息</a-button>
    <a-button @click="openWindow">打开新窗口</a-button>
    <!-- <a-button @click="openBrowser">创建新视图</a-button>
    <a-button @click="closeBrowser">关闭当前视图</a-button> -->
    <a-button @click="linkTo">to home</a-button>
    <a-button @click="notifyBtn">消息通知</a-button>
    <a-button @click="showMenu">打开菜单</a-button>
    <a-button @click="chooseImage">选择图片</a-button>
    <a-button @click="saveTXT">保存内容到本地</a-button>

    <div>
      <img :src="readImage" style="width: 100%" alt="" />
    </div>
    <!-- <div>
      <webview
        ref="webview"
        id="myWebview"
        class="webview"
        src=""
        allowpopups
      ></webview>
    </div> -->
  </div>
</template>
  
  <script setup>
import { useRouter } from "vue-router";
import { shell, ipcRenderer, remote, clipboard } from "electron";
import fs from "fs";
import { onMounted, ref } from "vue";
const { dialog, Menu } = remote;

const appRouter = useRouter();
const linkTo = () => {
  appRouter.push("/");
};

onMounted(() => {
  // let myWebview = document.getElementById("myWebview");

  // 监听主进程ipcMain传递的消息
  ipcRenderer.on("openIframe", (e, url) => {
    console.log("🚀 ~ file: test.vue:36 ~ ipcRenderer.on ~ url:", url);
    // myWebview.src = url;
  });
});

const openJianshu = () => {
  shell.openExternal(
    "https://blog.csdn.net/weixin_40629244/article/details/115875751"
  );
};

const setTitle = () => {
  ipcRenderer.send("set-title", "设置新标题");
};

const openWindow = () => {
  ipcRenderer.invoke("open-window", "打开子窗口");
  //   window.open("/#/about", "about", "height=500,width=350,top=10,left=800");
};

// const openBrowser = () => {
//   ipcRenderer.invoke("open-browser", "打开视图");
// };

// const closeBrowser = () =>{
//   ipcRenderer.invoke("close-browser", "关闭视图");
// }

const showMenu = () => {
  ipcRenderer.send("show-menu", "打开菜单");
};

const notifyBtn = () => {
  let option = {
    title: "我是消息通知的title",
    body: "嘿嘿,我是消息体",
  };
  new window.Notification(option.title, option);
};

const readImage = ref("");
const chooseImage = () => {
  dialog
    .showOpenDialog({
      // 标题
      title: "打开图片",
      // 默认赋值
      defaultPath: "",
      // 过滤器,name 后面的值随便写 extensions 里面写允许上传的类型
      // filters:[{
      //     name:'image',
      //     extensions:['jpg']
      // }],
      buttonLabel: "选择图片",
    })
    .then((result) => {
      console.log(result);
      readImage.value = result.filePaths[0];
    })
    .catch((err) => {
      console.log(err);
    });
};

const saveTXT = () => {
  dialog
    .showSaveDialog({
      title: "保存文件",
    })
    .then((result) => {
      var saveText = "保存的内容suzhidong";
      fs.writeFileSync(result.filePath, saveText);
    })
    .catch((err) => {
      console.log(err);
    });
};

// 获取选中内容
function getSelection() {
  var text = "";
  if (window.getSelection) {
    // 除IE9以下 之外的浏览器
    text = window.getSelection().toString();
  } else if (document.selection && document.selection.type !== "Control") {
    //IE9以下，可不考虑
    text = document.selection.createRange().text;
  }
  if (text) {
    return text;
  }
}

//右键菜单
let rightTemplate = [
  {
    label: "复制",
    // role:'copy', // 快捷键与系统冲突时可以使用role属性指定
    accelerator: "ctrl+c", //快捷键
    click: () => {
      const str = getSelection(); // 获取选中内容
      if(!str){
        return false;
      }
      clipboard.writeText(str); // 写入剪贴板
      console.log("复制");
    },
  },
  {
    label: "粘贴",
    accelerator: "ctrl+v", //快捷键
    click: () => {
      if (document.activeElement) {
        const str = clipboard.readText(); // 获取剪贴板内容
        var ev = new Event("input", { bubbles: true });
        ev.simulated = true;
        document.activeElement.value = str; // 写入焦点元素
        document.activeElement.dispatchEvent(ev);
        // clipboard.clear() // 清空剪贴板，一般都不做清空，爱粘贴就粘贴，干嘛要粘贴完就清空呢
      }
      console.log("粘贴");
    },
  },
];
var m = Menu.buildFromTemplate(rightTemplate);

window.addEventListener("contextmenu", (e) => {
  e.preventDefault(); //取消事件的默认动作。
  m.popup({
    window: remote.getCurrentWindow(),
  });
});
</script>
  <style>
#myWebview {
  width: 100%;
  height: 500px;
}
</style>